<!-- 业绩激励 新建编辑查看 -->

<template>
    <div class="profitIncentive">
        <div>
            创建时间：
            <el-date-picker
                    v-model="searchTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" @click="searchDataByTime" id="monitorEnter">查询</el-button>
            <el-button type="primary" @click="newPage('new', false)">新建</el-button>
        </div>
        <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%;margin-top: 20px;">
            <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    property="version"
                    width="80"
                    align="center"
                    label="版本号">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="80"
                    label="规则时间">
                <template slot-scope="scope">{{ruleEffect[scope.row.ruleEffect]}}</template>
            </el-table-column>
            <el-table-column
                    align="center"
                    width="130"
                    label="计提标准">
                <template slot-scope="scope">{{extractStandard[scope.row.extractStandard]}}</template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="计提节点">
                <template slot-scope="scope">
                    <p style="margin: 0; padding: 0;" v-for="item in scope.row.nodeList">{{item.projectLevelName+'：'+
                        item.calculateNodeNames}}</p>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    width="110"
                    label="计提基数来源">
                <template slot-scope="scope">{{scope.row.nodeList | baseNumFilter}}</template>
            </el-table-column>
            <el-table-column
                    property="calProportion"
                    align="center"
                    width="110"
                    label="计提基数比例">
                <template slot-scope="scope">{{scope.row.ruleEffect === 1 ? scope.row.calProportion :
                    scope.row.groupProportion}}%
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    width="80"
                    label="激励标准">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewInterval(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    width="110"
                    property="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="110"
                    property="creatorName"
                    label="创建人">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="100"
                    label="详细信息">
                <template slot-scope="scope">
                    <el-button type="text" @click="newPage('view', scope.row)">查看</el-button>
                    <el-button type="text" @click="newPage('edit', scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>

        <!-- 区间范围弹框 -->
        <el-dialog
                title="查看激励标准"
                :visible.sync="intervalDialogVisible"
                width="500px">
            <div>
                <div v-if="intervalDialogData.ruleEffect === 1">
                    选择分类：
                    <el-select v-model="intervalDialogData.classification" placeholder="请选择分类">
                        <el-option
                                v-for="item in intervalDialogData.classificationOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <!--                    <div class="mt20">计算节点：{{calNode[intervalDialogData.calNode[intervalDialogData.classification]]}}
                                        </div>-->
                </div>
                <div v-else>
                    <div>集团计提分配比例：{{intervalDialogData.groupProportion}}%</div>
                    <div class="mt20">好生活应发占比：{{intervalDialogData.easylifeProportion}}%</div>
                </div>
                <el-table
                        :data="intervalDialogData.classificationTableData[intervalDialogData.classification]"
                        border
                        highlight-current-row
                        style="width: 100%;margin-top: 20px;">
                    <el-table-column
                            type="index"
                            width="50"
                            align="center"
                            label="序号">
                    </el-table-column>
                    <el-table-column
                            property="departmentName"
                            align="center"
                            label="部门">
                    </el-table-column>
                    <el-table-column
                            property="departmentProportion"
                            align="center"
                            label="分配比例(%)">
                        <template slot-scope="scope">{{scope.row.departmentProportion}}%</template>
                    </el-table-column>
                </el-table>
            </div>

            <span slot="footer">
                <el-button @click="intervalDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath';
    import {extractCategory, extractStandard, ruleEffect, calNode, extractBaseNum} from '../fieldMap'

    export default {
        name: "performanceIncentive",
        title: '业绩激励标准',
        data() {
            return {
                searchTime: "",
                tableConfig: {
                    startTime: "",
                    endTime: "",
                    pageNum: 1,
                    pageSize: 10,
                    totalSize: 10
                },

                intervalDialogData: {
                    ruleEffect: 1,
                    classification: "",
                    calNode: {},
                    classificationOptions: [],
                    classificationTableData: [],
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                intervalDialogVisible: false,
                tableData: [],

                extractCategory, extractStandard, ruleEffect, calNode, extractBaseNum
            }
        },
        created() {
            this.getRevenueAllotList()
        },
        activated(){
            this.searchDataByTime();
        },
        mounted() {

        },
        filters: {
            baseNumFilter(list) {
                let arr = [];
                list.forEach((item) => {
                    if (!arr.includes(extractBaseNum[item.extractBaseNum])) {
                        arr.push(extractBaseNum[item.extractBaseNum])
                    }
                });
                return arr.join(';')
            }
        },
        methods: {
            searchDataByTime() {
                if (this.searchTime === null) {
                    this.searchTime = ["", ""]
                }
                if (this.searchTime.length) {
                    this.tableConfig.startTime = +new Date(this.searchTime[0])
                    this.tableConfig.endTime = +new Date(this.searchTime[1])
                }
                this.tableConfig.pageNum = 1;
                this.getRevenueAllotList();
            },
            newPage(type, row) {
                let query = {
                    type
                };
                if (row) {
                    query['id'] = row.id;
                    if (row.ruleEffect === 1) {
                        query['dateType'] = 'month'
                    } else {
                        query['dateType'] = 'year'
                    }
                }
                this.$router.push({path: "./performanceIncentiveHandle", query: query})
            },

            checkRepeatDev(nodeList) {
                let nodeListMap = {};
                nodeList.forEach((item) => {
                    if (!nodeListMap[item.developerId || item.developId]) {
                        nodeListMap[item.developerId || item.developId] = item
                    }
                })
                let resNodeList = [];
                for (let key in nodeListMap) {
                    resNodeList.push(nodeListMap[key])
                }
                return resNodeList
            },
            viewInterval(row) {
                this.intervalDialogData = {
                    ruleEffect: 1,
                    classification: "",
                    calNode: {},
                    classificationOptions: [],
                    classificationTableData: [],
                };
                let currentData = {}
                this.axios.post(api.viewRevenueAllotByMonth, {
                    standardId: row.id
                }).then((res) => {
                    let data = res.data.data;
                    let classificationOptions = [];
                    let departSettingList = {};
                    // let calNode = {};
                    let nodeList = this.checkRepeatDev(data.developerList)
                    nodeList.forEach((item) => {
                        classificationOptions.push({
                            label: item.developName,
                            value: item.projectLevelId
                        })
                        let arrTemp = []
                        if (item.departSettingList) {
                            item.departSettingList.forEach((subItem) => {
                                arrTemp.push({
                                    departmentId: subItem.departmentId,
                                    departmentName: subItem.departmentName,
                                    departmentProportion: subItem.departmentProportion
                                })
                            })
                        }
                        // calNode[item.developId] = item.calNode
                        departSettingList[item.projectLevelId] = arrTemp;
                    })
                    this.intervalDialogData = {
                        ruleEffect: data.ruleEffect,
                        classificationTableData: departSettingList,
                        // calNode: calNode,
                        classification: nodeList[0].projectLevelId,
                        classificationOptions: classificationOptions
                    }
                })

                // if (row.ruleEffect === 1) {
                //  3.0取消年
                // } else {
                //     this.axios.post(api.viewRevenueAllotByYear, {
                //         standardId: row.id
                //     }).then((res) => {
                //         let data = res.data.data;
                //         this.intervalDialogData = {
                //             ruleEffect: data.ruleEffect,
                //             classificationTableData: {0: data.departSettingList},
                //             easylifeProportion: data.easylifeProportion,
                //             groupProportion: data.groupProportion,
                //             classification: 0,
                //             classificationOptions: []
                //         }
                //     })
                // }
                this.intervalDialogVisible = true
            },
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getRevenueAllotList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getRevenueAllotList()
            },
            getRevenueAllotList() {
                this.axios.post(api.getRevenueAllotList, {
                    startTime: this.tableConfig.startTime,
                    endTime: this.tableConfig.endTime,
                    pageNum: this.tableConfig.pageNum,
                    pageSize: this.tableConfig.pageSize
                }).then((res) => {
                    this.tableData = res.data.data.list;
                    this.tableConfig.totalSize = res.data.data.total;
                })
            }
        },
        components: {},
        computed: {}
    }
</script>

<style>

</style>



